<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-导航守卫-组件内的导航守卫</title>
</head>

<body>
    <div id="app">
        <!-- 5.显示路由 -->
        <router-link to="/Home">首页</router-link>
        <router-link to="/product/123">产品详情1</router-link>
        <router-link to="/product/456">产品详情1</router-link>
        <router-view></router-view>
    </div>
    <!-- 1.引入依赖 -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // 2.配置路由
        let routes = [
            {
                path: "/Home",
                component: () => Promise.resolve({
                    template: `<h1>主页</h1>`,
                })
            },
            {
               /**
                *:productId  动态路由 
                * 
               */
                path: "/product/:productId",
                component: () => import("./Product.js")
            }
        ];
        //3.创建路由实例对象
        let router = new VueRouter({
            routes
        });
        let vm = new Vue({
            //4.将路由实例交给app对象管理
            router,
            el: "#app"
        })
    </script>
</body>

</html>